import { ref, watch } from "vue"
import { defineStore } from "pinia"

function initState() {
  return {
    isCollapse: false,
    tags: [
      {
        path: '/home',
        name: 'home',
        label: '首页',
        icon: 'home'
      },
    ],
    currentMenu: null,
    menuList: [],
    token: '',
    routeList: [],
  }
}
export const useAllDataStore = defineStore('allData', () => {
  const state = ref(initState())

  watch(state, (newObj) => {
    // 如果变化后的state中的token不存在，代表用户退出(一般退出后会清除token)，不需要持久化存储state了
    if (!newObj.token) return
    localStorage.setItem('store', JSON.stringify(newObj))
  }, { deep: true })

  function selectMenu(val) {
    if (val.name === 'home') {
      state.value.currentMenu = null
    } else {
      // 处理面包屑问题
      state.value.currentMenu = val
      const index = state.value.tags.findIndex(item => item.name === val.name)
      index === -1 ? state.value.tags.push(val) : ''
    }
  }

  function updateTags(tag) {
    const index = state.value.tags.findIndex(item => item.name === tag.name)
    state.value.tags.splice(index, 1)
  }

  function updateMenuList(val) {
    state.value.menuList = val
  }

  function addMenu(router, type) {
    if (type === 'refresh') {
      // 这个判断是看持久化数据是否存在，因为这个addMenu我们需要放到main.js中执行，第一次加载项目的时候，会执行但是因为没有持久化数据，所以不是刷新，直接return出去
      if (JSON.parse(localStorage.getItem('store'))) {
        // 读取持久化数据，赋值给state
        state.value = JSON.parse(localStorage.getItem('store'))
        // routeList保存的函数，存储的时候不能解析，其中的值就是null，这里重新赋值[]
        state.value.routeList = []
      } else {
        return
      }
    }
    const menu = state.value.menuList
    const module = import.meta.glob('../views/**/*.vue') // ** 表示0个或多个文件
    const routeArr = []
    menu.forEach(item => {
      // 如果菜单有children
      if (item.children) {
        // 把children遍历格式化
        item.children.forEach(val => {
          const url = `../views/${val.url}.vue`
          // 这里通过url取出对应的组件
          val.component = module[url]
        })
        // 需要注意的是我们只需要为item.children中的菜单添加路由，所以我们把它解构出来
        routeArr.push(...item.children)
      } else {
        const url = `../views/${item.url}.vue`
        item.component = module[url]
        routeArr.push(item)
      }
    })
    state.value.routeList = []
    // console.log(router.getRoutes())
    const routers = router.getRoutes()
    routers.forEach(item => {
      if (item.name === 'main' || item.name === 'login' || item.name === '404') {
        return
      } else {
        router.removeRoute(item.name)
      }
    })

    // 遍历routeArr
    routeArr.forEach(item => {
      // addRoute方法会返回一个函数，执行这个函数会把这个路由删除
      // 这里我们把每一次router.addRoute添加路由的返回值收集起来，放到state中的routeList
      // addRoute第一个参数要添加子路由的路由name，第二个是一个路由记录
      state.value.routeList.push(router.addRoute('main', item))
    })
  }

  function clean() {
    state.value.routeList.forEach(item => {
      // console.log(item)
      if (item) item()
    })
    state.value = initState()
    localStorage.removeItem('store')
  }

  return {
    state,
    selectMenu,
    updateTags,
    updateMenuList,
    addMenu,
    clean,
  }
})
